<template>
  <div class="main-content">
    <div style="margin-bottom: 20px">
      <el-carousel height="350px">
        <el-carousel-item v-for="item in data.slideshowList" :key="item">
          <img @click="handleGotoPetDetail(item)" :src="item.image" alt="" style="width: 100%; height: 350px; cursor: pointer">
        </el-carousel-item>
      </el-carousel>
    </div>
    <div style="margin: 30px 0; display: flex; grid-gap: 20px">
      <div style="flex: 1">
        <div style="display: flex; align-items: center; margin-bottom: 15px">
          <div style="flex: 1; font-size: 25px; font-weight: bold">推荐宠物</div>
          <div style="cursor: pointer" @click="router.push('/front/pet')">查看所有宠物<el-icon style="top: 2px"><ArrowRightBold/></el-icon></div>
        </div>
        <div>
          <el-row :gutter="10">
            <el-col :span="12" v-for="item in data.recommendPetList" :key="item.id">
              <div @click="goto('/front/petDetail?id=' + item.id)" class="card" style="padding: 0; margin-bottom: 10px; cursor: pointer">
                <img :src="item.image" alt="" style="width: 100%; height: 200px; display: block">
                <div style="padding: 10px">
                  <div style="display: flex; justify-content: space-between; align-items: center">
                    <span style="font-size: 16px; font-weight: bold">{{ item.name }}</span>
                    <span style="font-size: 18px; color: red">¥{{ item.price }}</span>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
      <div style="flex: 1">
        <div style="display: flex; align-items: center; margin-bottom: 15px">
          <div style="flex: 1; font-size: 25px; font-weight: bold">热门宠物店</div>
          <div style="cursor: pointer" @click="router.push('/front/petShop')">查看所有宠物店<el-icon style="top: 2px"><ArrowRightBold/></el-icon></div>
        </div>
        <div class="card">
          <div @click="goto('/front/petShopDetail?id=' + item.id)" class="petShon-item" v-for="item in data.petShopList" :key="item.id" style="display: flex; align-items: center; grid-gap: 20px; margin-bottom: 5px; border-bottom: 1px solid #ddd; padding: 10px">
            <div style="width: 100px; text-align: center; cursor: pointer">
              <img :src="item.avatar" alt="" style="width: 40px; height: 40px; border-radius: 50%">
              <div style="font-size: 16px; ">{{ item.name }}</div>
            </div>
            <div style="justify-items: center">
              <div>售卖宠物类型：{{ JSON.parse(item.sellPet || '[]').join('、') }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import {reactive} from 'vue'
  import request from "@/utils/request.js";
  import {ElMessage} from "element-plus";
  import router from "@/router/index.js";
  import {ArrowRightBold} from "@element-plus/icons-vue";

  const data = reactive({
    slideshowList: [],
    recommendPetList: [],
    petShopList: []
  })

  window.scrollTo({top: 0})

  request.get('/slideshow/query/all').then(res => {
    if (res.code === '200') {
      data.slideshowList = res.data
    } else {
      ElMessage.error(res.msg)
    }
  })

  request.get('/pet/query/all', {
    params: {
      recommend: '是',
      status: '上架'
    }
  }).then(res => {
    if (res.code === '200') {
      data.recommendPetList = res.data.splice(0, 4)
    } else {
      ElMessage.error(res.msg)
    }
  })

  request.get('/petShop/hot').then(res => {
    if (res.code === '200') {
      data.petShopList = res.data
    } else {
      ElMessage.error(res.msg)
    }
  })


  const goto = (path) => {
    router.push(path)
  }

  const handleGotoPetDetail = (slideshow) => {
    let slideshowId = slideshow.id
    request.get('/slideshow/query?id=' + slideshowId).then(res => {
      if (res.code === '200') {
        let petId = res.data.petId
        router.push('/front/petDetail?id=' + petId)
      } else {
        ElMessage.error(res.msg)
      }
    })
  }

</script>


<style>
  .petShon-item:last-child {
    border: none !important;
    padding-bottom: 0 !important;
  }
</style>